<template>
  <el-container class="bg_img" style="height: 1000px; ">
    <el-header style="height:100px;  ">
      <img src="./../../assets/images/bigData01/head.png" style="width: 100%;height: 100%;">
    </el-header>
    <el-main>
      <div class="left">
        <div class="content">
          <BigDataCard :width="'550px'" :height="'550px'" :mainTitle="'负责区域'">
            <template slot="Content">
              <template>
                <div style="width: 100%;height: 500px;border: 1px red solid;">
                  <div id="map" style="height:85%;width: 90%;   margin:0 auto; ">
                  </div>
                </div>
                
              </template>
              
            </template>
          </BigDataCard>
        </div>
        <div class="content ">
          <BigDataCard :width="'550px'" :height="'550px'" :mainTitle="'学校体温异常率'">
            <template slot="Content">

            </template>
          </BigDataCard>
        </div>
      </div>
      <div class="right">
        <div class="content">
          <div class="content_left">
            <BigDataCard :width="'550px'" :height="'550px'" :mainTitle="'学生体温异常率'">
              <template slot="Content">

              </template>
            </BigDataCard>
          </div>
          <div class="content_right"></div>
        </div>
        <div class="content ">
          <div class="content_left">
            <BigDataCard :width="'550px'" :height="'550px'" :mainTitle="'设备在线率'">
              <template slot="Content">
              </template>
            </BigDataCard>
          </div>
          <div class="content_right"></div>

        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  import BigDataCard from "@/views/bigData01/components/Card.vue";
  import {
    Map,
    regionName
  } from "@/api/map/region";

  export default {
    name: "BigDataIndex",
    components: {
      BigDataCard
    },
    data() {
     return {
       myChart: null,
       mapOption: {
         series: [{
           type: "map",
           map: 'map',
           zoom: 1.2,
           itemStyle: {
             normal: {
               borderColor: 'rgba(147, 235, 248, 1)',
               borderWidth: 1,
               areaColor: {
                 type: 'radial',
                 x: 0.5,
                 y: 0.5,
                 r: 0.8,
                 colorStops: [{
                   offset: 0,
                   color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                 }, {
                   offset: 1,
                   color: 'rgba(147, 235, 248, .30)' // 100% 处的颜色
                 }],
                 globalCoord: false // 缺省为 false
               },
               shadowColor: 'rgba(128, 217, 248, 1)',
               shadowOffsetX: -2,
               shadowOffsetY: 2,
               shadowBlur: 10
             },
             emphasis: {
               show: true,
               areaColor: '#389BB7',
               borderWidth: 0
             }
           },
           label: {
             normal: {
               show: true,
               textStyle: {
                 fontSize: 10,
                 color: "#fff",
               }
             },
             emphasis: {
               show: true
             }
           },

         }, ],

       },
       mapJSON: [],
       regionNamelist: [],
       paramData: []
     }
    },
    created() {
    this.getRegionName();
    },
    mounted() {
      this.$nextTick(() => {
        this.getMap();

      })

    },
    methods: {

      //获取地图
      async getMap() {
        let that = this;
        // 获取当前用户所在地域adcode及等级
        var adcode = this.$store.state.user.dept.deptIdStr.substring(0, 6);
        var level = this.$store.state.user.dept.deptLevel;
        var name = this.$store.state.user.dept.deptName;
        that.paramData.push({
          adcode,
          level,
          name
        });

        //获取地图
        that.myChart = echarts.init(document.getElementById("map"));
        await that.getMapBorder(level, adcode);
        that.myChart.on('click', async function(params) {
          var filter = that.getAdcodeLevel(params.name, that.mapJSON.features);
          var d = that.paramData[that.paramData.length - 1].level;
          console.log('当前等级', d);
          if (d != 'district') {
            //获取出下一级名 ,通过遍历所在地图数据获得adcode

            adcode = filter.adcode;
            level = filter.level;
            name = params.name
            that.paramData.push({
              adcode,
              level,
              name
            });
            await that.getMapBorder(level, adcode);

            //点击后获取新的Y轴数值
            regionName(adcode).then(response => {
              var arr = response.data.data.list;
              that.regionNamelist.length = 0;
              for (var item of arr) {
                that.regionNamelist.push(item.name);
              };
              that.getTempChart();
            });

          }

        });

      },

      /**
       * 根据地域编码及等级获取json
       */
      async getMapBorder(level, adcode) {
        let that = this;
        var mapJSON = null;
        await Map(level, adcode).then(response => {
          mapJSON = JSON.parse(response.data);
          that.mapJSON = mapJSON;
        });
        echarts.registerMap('map', mapJSON);
        that.myChart.setOption(that.mapOption);
      },


      /**
       * 根据名称及当前地图数据获取adcode
       */
      getAdcodeLevel(name, list) {
        var data = {
          adcode: null,
          level: null,
        };
        for (var item of list) {
          if (name === item.properties.name) {
            data.adcode = item.properties.adcode;
            data.level = item.properties.level;
            break;
          }
        }
        return data;
      },


      //获取Y轴城市名称
      async getRegionName() {
        var adcode = this.$store.state.user.dept.deptIdStr.substring(0, 6);
        await regionName(adcode).then(response => {
          var arr = response.data.data.list;
          if (!this.$yhFunc.isEmpty(arr)) {
            for (var item of arr) {
              let that = this;
              that.regionNamelist.push(item.name);
            }
          }
        });

      },

    },
  }
</script>

<style scoped lang="scss">
  .bg_img {
    background: url("./../../assets/images/bigData01/bg1.png");
    width: 100%;
    height: 100%;
  }

  .left {
    width: 608px;
    height: 100%;
    float: left;

  }

  .content_left {
    width: 50%;
    height: 100%;
    float: left;

  }

  .content_right {
    width: 50%;
    height: 100%;
    float: left;

  }

  .right {
    height: 1200px;
    float: left;
    width: calc(100% - 608px);
  }

  .content {
    width: 100%;
    height: 600px;
    padding: 20px;
  }
</style>
